<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .view{
            width: 560px;
            height: 300px;
            border: 1px solid #000;
            margin:100px auto;
            position: relative;
        }

        .view ul li{
            width: 112px;
            height:300px;
            float: left;
            position: relative;

            /* 让里面的子盒子保持3d 效果*/

            transform-style:preserve-3d;
            transition:all 1s;

            /*transform:rotateX(-45deg) rotateY(-27deg);*/
        }

        .view li span{
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .view li span:nth-child(1){
            transform:translateZ(150px);
            background-image: url(images/1.jpg);

        }

        .view li span:nth-child(2){
            transform:rotateX(90deg) translateZ(150px);


            background-image: url(images/2.jpg);
        }

        .view li span:nth-child(3){
            transform:rotateX(180deg) translateZ(150px);
            background-image: url(images/3.jpg);
        }

        .view li span:nth-child(4){
            transform:rotateX(-90deg) translateZ(150px);
            background-image: url(images/4.jpg);
        }

        .view li:nth-child(1) span{

        }

        .view li:nth-child(2) span{
            background-position: -112px 0;
        }
        .view li:nth-child(3) span{
            background-position: -224px 0;
        }
        .view li:nth-child(4) span{
            background-position: -336px 0;
        }
        .view li:nth-child(5) span{
            background-position: -448px 0;
        }


        /*左右按钮*/

        .view .prev,.view .next{
            position: absolute;
            width: 80px;
            height: 80px;
            background-color: rgba(255,255,255,0.5);
            text-align: center;
            line-height: 80px;
            font-size:50px;
            color:red;
            left:0;
            top:50%;
            /*margin-top:-40px;*/
            transform:translateY(-50%);
            text-decoration: none;
        }

        .view .next{
            left:auto;
            right:0;
        }

    </style>
</head>
<body>
<div class="view">
    <ul>
        <li>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </li>
        <li>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </li>
        <li>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </li>
        <li>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </li>
        <li>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </li>
    </ul>
    <a href="javascript:;" class="prev">&lt;</a>
    <a href="javascript:;" class="next">&gt;</a>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
    //    基本思路
    //    定义变量 记录当前播放的index
           var index=0;

        var isTransitionEnd=true;

    //    当左箭头被点击是
        $('.prev').click(function(){

            if(isTransitionEnd){
                index++;
                //选择 90deg
                var r=90*index;
                isTransitionEnd=false;
                $('li').css('transform','rotateX('+r+'deg)');

                $('li').each(function(index,item){
//                 设置动画的延迟间隔0.25秒
                    $(item).css('transition-delay',index*0.25+'s');
                });
            }
        });
// 下一张
    $('.next').click(function(){
//        如果上次过渡结束 ，执行下一次
        if(isTransitionEnd){
            //        索引值减小
            index--;
            //       选择 90deg
            var r=90*index;
            isTransitionEnd=false;

            $('li').css('transform','rotateX('+r+'deg)');

            $('li').each(function(index,item){
//                 设置动画的延迟间隔0.25秒
                $(item).css('transition-delay',index*0.25+'s');
            });

        }

    });
//    只有最会一个li过渡结束才算 轮播图过渡结束
    $('li').eq(4).on('webkitTransitionEnd',function(){
        isTransitionEnd=true;
    })

})

</script>
</body>
</html>